<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <link rel="stylesheet" href="css/admin-orders.css">
    <link rel="stylesheet" href="css/admin-common.css">
</head>
<body>
<div class="admin-container">
    <div class="admin-sidebar">
        <!-- 侧边栏导航 -->
        <ul>
            <li><a href="dashboard.html">仪表盘</a></li>
            <li class="active"><a href="admin-orders.html">订单管理</a></li>
            <li><a href="products.html">商品管理</a></li>
            <li><a href="users.html">用户管理</a></li>
        </ul>
    </div>

    <div class="admin-content">
        <div class="admin-header">
            <h1>订单管理</h1>
            <div class="admin-search">
                <input type="text" id="orderNoInput" placeholder="订单号">
                <input type="text" id="userIdInput" placeholder="用户ID">
                <button id="searchBtn">搜索</button>
            </div>
        </div>

        <div class="filter-bar">
            <div class="filter-group">
                <label>订单状态:</label>
                <select id="statusFilter">
                    <option value="">全部</option>
                    <option value="0">待支付</option>
                    <option value="1">已支付</option>
                    <option value="2">已发货</option>
                    <option value="3">已完成</option>
                    <option value="4">已取消</option>
                </select>
            </div>

            <div class="filter-group">
                <label>时间范围:</label>
                <input type="date" id="startDate">
                <span>至</span>
                <input type="date" id="endDate">
            </div>

            <button id="resetFilter">重置</button>
        </div>

        <div class="order-stats">
            <div class="stat-card">
                <h3>今日订单</h3>
                <p id="todayOrders">0</p>
            </div>
            <div class="stat-card">
                <h3>今日销售额</h3>
                <p id="todaySales">¥0.00</p>
            </div>
            <div class="stat-card">
                <h3>待发货</h3>
                <p id="pendingShipment">0</p>
            </div>
        </div>

        <div class="order-list">
            <table>
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>用户ID</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>下单时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="orderTableBody">
                <!-- 订单数据将通过JS动态加载 -->
                </tbody>
            </table>

            <div class="pagination" id="pagination">
                <!-- 分页控件 -->
            </div>
        </div>
    </div>
</div>

<script src="js/admin-orders.js"></script>
</body>
</html>